<template>
  <div style="margin: 20px">
    <div class="page-content">
      <div class="form-content">
        <el-form label-width="150px" :model="information" :rules="rules">
          <el-row style="padding-bottom:5px">
            <font style="font-size:15px;font-weight:bold">个人资料</font>
          </el-row>
          <el-row style="padding-top:5px; border-top: 2px solid #dddddd">
            <el-col :span="12">
              <el-form-item label="员工姓名">
                <el-input v-model="information.name" style="width:100%" readonly />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="性别">
                <el-select v-model="information.sex" placeholder="性别" style="width: 100%;">
                  <el-option
                    v-for="item in sexes"
                    :key="item.id"
                    :label="item.name"
                    :value="item.name"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="单位：">
                <el-input v-model="information.companyName" style="width:100%" readonly />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="出生日期：">
                <el-date-picker
                  v-model="information.birthday"
                  type="date"
                  style="width:100%"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="员工编号：" prop="employeeCode">
                <el-input v-model="information.employeeCode" placeholder="员工编号" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="参加工作时间：">
                <el-date-picker
                  v-model="information.jobTime"
                  type="date"
                  style="width:100%"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="所在部门：">
                <el-input v-model="information.empGroup" style="width:100%" readonly />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="文化程度：">
                <el-select v-model="information.education" placeholder="文化程度" clearable style="width:100%">
                  <el-option
                    v-for="item in educations"
                    :key="item.id"
                    :label="item.name"
                    :value="item.name"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="员工类别：">
                <el-input v-model="information.category" style="width:100%" readonly />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="邮箱：" prop="email">
                <el-input v-model="information.email" placeholder="邮箱" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="电话：" prop="tel">
                <el-input v-model="information.tel" placeholder="电话" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="buttons">
            <el-form-item>
              <el-button type="primary" style="width:100px" @click="handleSubmit">确认</el-button>
              <el-button type="danger" style="width:100px" @click="$router.go(-1)">取消</el-button>
            </el-form-item>
          </el-row>
        </el-form>
        <!-- 修改密码表单 -->
        <el-form label-width="150px" :model="password">
          <el-row style="padding-bottom:5px">
            <font style="font-size:15px;font-weight:bold">修改密码</font>
          </el-row>
          <el-row style="padding-top:5px; border-top: 2px solid #dddddd">
            <el-col :span="12">
              <el-form-item label="旧密码：">
                <el-input v-model="password.oldPassword" style="width:100%" placeholder="请输入旧密码" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="新密码：">
                <el-input v-model="password.newPassword" style="width:100%" placeholder="请输入新密码" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="buttons">
            <el-form-item>
              <el-button type="primary" style="width:100px" @click="handleSubmitPassword()">确认</el-button>
              <el-button type="danger" style="width:100px" @click="$router.go(-1)">取消</el-button>
            </el-form-item>
          </el-row>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
// import { GetStaffDetail, UpdateStaff } from '../../../services/personCenter'
// import { GetDictionary } from '../../../services/dictionary'
export default {
  data() {
    return {
      information: {
        name: '黄罡',
        sex: '男',
        companyName: 'XX单位',
        jobTime: '2020-03-15',
        birthday: '1996-02-05',
        employeeCode: '123456789',
        education: '研究生',
        tel: '123456789',
        empGroup: '财务部',
        category: '正式工',
        email: '123456789@qq.com'
      },
      password: {},
      sexes: [],
      educations: [],
      rules: {
        // email: [{ required: false, trigger: 'blur' }, {
        //   validator: function(rule, value, callback) {
        //     if (/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(value) == false) {
        //       callback(new Error('请输入正确的邮箱格式'))
        //     } else {
        //       callback()
        //     }
        //   }
        // }],
        // tel: [{ required: false, trigger: 'blur' }, {
        //   validator: function(rule, value, callback) {
        //     if (/^1[34578]\d{9}$/.test(value) == false) {
        //       callback(new Error('请输入正确的手机号'))
        //     } else {
        //       callback()
        //     }
        //   }
        // }]
      }
    }
  },
  mounted() {
    this.getStaffDetails()
    this.getsex()
    this.geteducation()
  },
  methods: {
    // 获取个人数据
    getStaffDetails() {
      // GetStaffDetail().then((res) => {
      //   this.information = res.data
      // }).catch((err) => {
      //   this.$message.error(err.message)
      // })
    },
    // 更新个人资料
    handleSubmit() {
      // UpdateStaff(this.information).then(() => {
      //   this.$message.success('操作成功')
      //   this.$router.go(0) // 返回上一url
      // }, (err) => {
      //   this.$message.error(err.message)
      // })
    },
    // 更新个人密码
    handleSubmitPassword() {
      // UpdateStaff(this.password).then(() => {
      //   this.$message.success('操作成功')
      //   this.$router.go(0) // 返回上一url
      // }, (err) => {
      //   this.$message.error(err.message)
      // })
    },
    // 获取性别
    getsex() {
      // GetDictionary({ name: '性别' }).then((res) => {
      //   this.sexes = res.data
      // }).catch((err) => {
      //   this.$message.error(err.message)
      // })
    },
    // 获取文化程度
    geteducation() {
      // GetDictionary({ name: '文化程度' }).then((res) => {
      //   this.educations = res.data
      // }).catch((err) => {
      //   this.$message.error(err.message)
      // })
    }
  }
}

</script>
<style lang="scss" scoped>
.form-content {
  max-width: 800px;
}
.buttons{
  padding-top:20px;
  display: flex;
  justify-content: flex-end;
  height: 100px;
  align-items: center;
  padding-right: 0%;
}

</style>
